.footer {
  @include carbon--type-style('body-short-01');
  width: 100%;
  background: $carbon--black-100;
  color: $carbon--gray-30;
  position: relative;
  z-index: 2;
  padding-left: 0px;
}

.grid {
  min-height: 370px;
  padding-top: $spacing-07;
  padding-bottom: $spacing-07;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav {
  padding-bottom: $spacing-08;
  margin-bottom: $spacing-06;
  position: relative;

  &:after {
    @include carbon--breakpoint('sm') {
      content: '';
      background: $carbon--gray-80;
      width: calc(100% - 2rem);
      height: 1px;
      display: block;
      position: absolute;
      bottom: 0;
    }

    @include carbon--breakpoint('md') {
      display: none;
    }
  }
}

.listItem {
  display: block;

  @include carbon--breakpoint('sm') {
    margin: 0 0 $spacing-03 0;
  }

  @include carbon--breakpoint('lg') {
    margin: 0;
  }
}

.footer .content a {
  text-decoration: underline;
  color: $carbon--gray-10;
}

.footer .listItem a {
  @include carbon--type-style('body-long-01');
  color: $carbon--gray-10 !important; //needed to get the color correct on the homepage, we are setting all homepage links to a light blue in the homepage sass file.
  text-decoration: none;
//   outline: none;
  transition: $duration--fast-01 motion(standard, productive);

  &:hover {
    color: $carbon--gray-10;
    text-decoration: underline;
  }

  &:active,
  &:active:visited {
    color: $carbon--gray-10;
    text-decoration: underline;
  }
}

.footer p {
  @include carbon--type-style('body-short-01');
  padding-bottom: $spacing-05;
}

.footer p:last-child {
  padding-bottom: rem(48px);
}

.logo {
  fill: $carbon--gray-10;
  margin-top: $spacing-07;
}
